<template>
	<view class="index">
		<view class="top">
			<image class="avatar" src="~@/static/img/device.png" mode=""></image>
			<view class="info">
				<view class="model">
					{{modelInfo.modelTxt}}
				</view>
				<view class="connect-mode">
					{{modelInfo.connectModeTxt}}
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="info">
				<view class="content">
					<view class="text">
						{{systemInfo.platform}}
					</view>
					<view class="title">
						操作平台
					</view>
				</view>
				<view class="content">
					<view class="text">
						{{systemInfo.networkType}}
					</view>
					<view class="title">
						网络类型
					</view>
				</view>
				<view class="content">
					<view class="text">
						{{statusInfo.statusTxt}}
					</view>
					<view class="title">
						适配器状态
					</view>
				</view>
			</view>
			<view class="control">
				<view class="wrapper" @click="handleAdapterState">
					<image class="icon" :src="`../../static/img/bluetooth${statusInfo.img?statusInfo.img:''}.png`"
						mode=""></image>
					<view class="btn">
						{{statusInfo.btnTxt}}适配器
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="wrapper">
				<view class="row">
					<view class="opr" @click="handleButtonClick('history')">
						<image class="icon" src="~@/static/img/btn/btn-history-list.png">
						</image>
						<view class="title">
							历史设备
						</view>
					</view>
					<view class="opr" @click="handleButtonClick('scan')">
						<image class="icon" src="~@/static/img/btn/btn-device-scan.png">
						</image>
						<view class="title">
							设备扫描
						</view>
					</view>
				</view>
				<view class="row">
					<view class="opr" @click="handleButtonClick('log')">
						<image class="icon" src="~@/static/img/btn/btn-operate-log.png">
						</image>
						<view class="title">
							操作日志
						</view>
					</view>
					<view class="opr" @click="handleButtonClick('model')">
						<image class="icon" src="~@/static/img/btn/btn-device-model.png">
						</image>
						<view class="title">
							设备型号
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 设备型号 -->
		<view class="device-model" v-show="pickerView.visible">
			<view class="mask"></view>
			<view class="wrapper">
				<c-section title="选择设备型号" :underline="false" action="close" @click="pickerView.visible=false;">
				</c-section>
				<picker-view class="picker-view" :indicator-style="pickerView.indicatorStyle"
					:mask-style="pickerView.maskStyle" @change="handleChangeModel">
					<picker-view-column>
						<view class="item" v-for="(item,i) in dictionary.connectModes" :key="i">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,i) in dictionary.models[connectMode]" :key="i">{{item}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	// #ifdef APP-PLUS
	import mixBluetooth from '@/mixins/bluetooth-plus.js';
	// #endif
	// #ifndef APP-PLUS
	import mixBluetooth from '@/mixins/bluetooth.js';
	// #endif

	export default {
		data() {
			return {
				connectMode: 0,
				dictionary: {
					connectModes: [
						'设备直连', '无线中继'
					],
					models: [
						[
							'LPC100', 'LPC110', 'WAC710'
						],
						[
							'蓝牙模块'
						]
					]
				},
				pickerView: {
					visible: false,
					indicatorStyle: "height:100rpx;",
					maskStyle: "background-image: linear-gradient(180deg, rgba(53, 56, 65, .8) 10%, rgba(36, 38, 42, .6) 100%),linear-gradient(180deg, rgba(53, 56, 65, .8) 10%, rgba(36, 38, 42, .6) 100%);"
				}
			}
		},
		mixins: [mixBluetooth],
		computed: {
			...mapGetters('system', ['systemInfo']),
			...mapGetters('device', ['modelInfo']),
			...mapGetters('adapter', ['statusInfo'])
		},
		methods: {
			handleAdapterState() {
				switch (this.statusInfo.status) {
					case 0:
						this.openAdapter();
						break;
					case 1:
						uni.showToast({
							title: '开启中...',
							icon: 'none'
						});
						break;
					case 2:
						this.closeAdapter();
						break;
					case 3:
						this.stopDiscovery();
						break;
				}
			},
			handleButtonClick(type) {
				switch (type) {
					case 'scan':
						if (this.statusInfo.status <= 1) {
							uni.showToast({
								title: '请开启适配器',
								icon: 'error'
							});
							return;
						}

						uni.navigateTo({
							url: '../scan/scan'
						});
						break;
					case 'history':
						if (this.statusInfo.status <= 1) {
							uni.showToast({
								title: '请开启适配器',
								icon: 'error'
							});
							return;
						}

						uni.navigateTo({
							url: '../history/history'
						})
						break;
					case 'log':
						uni.navigateTo({
							url: '../log/log'
						})
						break;
					case 'model':
						this.pickerView.visible = true;
						break;
				}
			},
			handleChangeModel(e) {
				const values = e.detail.value;
				let connectMode = values[0];
				if (!connectMode) {
					connectMode = 0;
				}
				this.connectMode = connectMode;
				let model = values[1];
				if (!model) {
					model = 0;
				}
				this.updateModel({
					connectModeTxt: this.dictionary.connectModes[connectMode],
					modelTxt: this.dictionary.models[connectMode][model]
				});
			},
			...mapMutations('device', ['updateModel', 'clearScanned'])
		}
	}
</script>

<style lang="scss">
	.index {
		.top {
			display: flex;
			padding: 20rpx 50rpx 20rpx 50rpx;

			.avatar {
				width: 60rpx;
				height: 60rpx;
				border: solid 1px #fff;
				border-radius: 50%;
				padding: 10rpx 10rpx 10rpx 10rpx;
			}

			.info {
				padding-left: 30rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;

				.model {
					font-size: 28rpx;
					font-weight: bold;
					opacity: 0.8;
					padding-bottom: 10rpx;
				}

				.connect-mode {
					color: $uni-text-color-grey;
				}
			}
		}

		.middle {
			padding: 25rpx 15rpx;
			margin: 10rpx 20rpx 0 20rpx;
			border-radius: 20rpx;
			background: url("") no-repeat;
			background-size: 100% 100%;

			.info {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 10rpx;

				.content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.title {
						font-size: 24rpx;
						padding: 20rpx 0 10rpx 0;
						color: $uni-text-color-grey;
					}

					.text {
						font-size: 30rpx;
					}
				}
			}

			.control {
				margin: 10rpx 40rpx;
				border-radius: 20rpx;
				background-image: linear-gradient(180deg, #41434D -49%, #000000 201%);

				.wrapper {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 35rpx;
					cursor: pointer;

					&:active {
						border-radius: 20rpx;
						background-color: #41434D;
						transition: all 0s;
					}

					.icon {
						width: 90rpx;
						height: 90rpx;
						padding-right: 80rpx;
					}

					.btn {
						font-size: 40rpx;
						font-weight: bold;
					}
				}
			}
		}

		.bottom {
			margin: 30rpx 20rpx 0 20rpx;
			padding: 10rpx 40rpx;
			border-radius: 30rpx;
			background-image: linear-gradient(180deg, rgba(53, 56, 65, 1) 10%, rgba(36, 38, 42, 1) 100%);

			.wrapper {
				.row {
					display: flex;
					justify-content: space-around;
					margin: 20rpx 0;

					.opr {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-radius: 20rpx;
						background: url("") no-repeat;
						background-size: 100% 100%;
						padding: 60rpx 50rpx;
						width: 100%;
						cursor: pointer;

						.icon {
							width: 80rpx;
							height: 80rpx;
						}

						.title {
							padding-top: 20rpx;
							font-size: 26rpx;
							font-weight: bold;
						}

						&:active {
							border-radius: 20rpx;
							background-color: #41434D;
							transition: all 0s;
						}
					}
				}
			}
		}

		.device-model {
			position: fixed;
			left: 0;
			bottom: 0;

			.mask {
				background-color: $uni-bg-color;
				padding-top: 100%;
				opacity: 0.5;
			}

			.wrapper {
				background-color: $uni-bg-color;
				padding: 0 10px;
				box-shadow: 0px 0px 15px $uni-bg-color-shadow;
				border-radius: 20rpx;

				.picker-view {
					width: 700rpx;
					height: 460rpx;
					margin-top: 10rpx;

					.item {
						height: 100rpx;
						line-height: 100rpx;
						align-items: center;
						justify-content: center;
						text-align: center;
					}
				}
			}
		}
	}
</style>
